<template>
  <div>
    <div style="padding: 50px 100px">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
        <el-step title="步骤 4"></el-step>
      </el-steps>
    </div>
    <!-- 步骤1 -->
    <div class="buzhou" v-if="active == 1" style="">
      <!--  商品添加 -->
      <el-form ref="form" :model="form" label-width="90px">
        <div v-if="flag==1">
          <el-form-item label="商品名称">
            <el-input v-model="form.productName"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="form.stock"></el-input>
          </el-form-item>

          <el-form-item label="预售票价格">
            <el-input placeholder="请输入" v-model="form.sellPrice"></el-input>
          </el-form-item>
          <el-form-item label="现场票价格">
            <el-input v-model="form.sitePrice"></el-input>
          </el-form-item>
          <el-form-item label="评分">
            <el-input v-model="form.grade"></el-input>
          </el-form-item>
          <span style="font-size: 12px;color: #409EFF">        漫展分类选择，如果不填为周边
</span>

          <el-form-item label="分类选择">
            <div class="grid-content bg-purple">
              &nbsp; &nbsp;
              <el-select
                @change="test3"
                v-model="params.code"
                placeholder="请选择分类"
              >
                <el-option
                  v-for="(item, index) in categoryList"
                  :key="index"
                  :label="item.categoryName"
                  :value="item.categoryId"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>


        </div>
        <span style="font-size: 12px;color: #409EFF">
</span>

        <div v-if="flag==2">

          <el-form-item label="商品名称">
            <el-input v-model="form.productName"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="form.stock"></el-input>
          </el-form-item>
          <el-form-item label-width="100px" label="商品分类选择">
            <div class="grid-content bg-purple">
              &nbsp; &nbsp;
              <el-select
                @change="test4"
                v-model="params.code"
                placeholder="请选择分类"
              >
                <el-option
                  v-for="(item, index) in typeList"
                  :key="index"
                  :label="item.typeName"
                  :value="item.typeId"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>

        </div>

        <el-form-item>
          <el-button type="danger" @click="flag=2">周边上传</el-button>

          <el-button type="primary" @click="save1">下一步</el-button>
          <el-button @click="toList">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 步骤2 -->

    <div v-if="active == 2" style="padding: 50px 420px">
      <!--  商品添加 -->
      <el-form ref="form" :model="form" label-width="90px">

        <el-form-item label="地区选择">
          <div class="grid-content bg-purple">
            <span class="grid">省</span>
            &nbsp; &nbsp;
            <el-select @change="test" v-model="value6" placeholder="请选择状态">
              <el-option
                v-for="(item, index) in provinceList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            &nbsp;&nbsp;
            <div class="grid-content bg-purple">
              <span class="grid">市</span>
              &nbsp; &nbsp;
              <el-select
                @change="test2"
                v-model="form.cityId"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="(item, index) in selectCityList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="form.address"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.img" :src="form.img" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save1">下一步</el-button>
          <el-button @click="back">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="active == 3" style="padding: 50px 420px">
      <el-form ref="form" :model="form" label-width="90px">
        <div v-if="flag==1">
          <el-form-item label="嘉宾名称">
            <el-input
              v-model="guestName"
              placeholder="请输入嘉宾名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="图片">
            <el-upload
              class="avatar-uploader"
              :action="upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess02"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="img" :src="img" class="avatar"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

        </div>
        <el-form-item>
          <el-button type="danger" @click="saveParams">保存参数</el-button>

          <el-button type="primary" @click="save1">下一步</el-button>
          <el-button @click="back">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 步骤4 -->

    <div v-if="active == 4" style="padding: 50px 420px">
      <!--  商品添加 -->
      <el-form ref="form" :model="form" label-width="90px">
        <div v-if="flag==1">
          <el-form-item label="场馆设施">

            <el-select v-model="form.venueId" placeholder="请选择">
              <el-option
                v-for="item in venueList"
                :key="item.value"
                :label="item.dictName"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交通方式">

            <el-select v-model="form.trafficId" placeholder="请选择">
              <el-option
                v-for="item in trafficList"
                :key="item.value"
                :label="item.dictName"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="平台热度">
            <el-select v-model="form.platformId" placeholder="请选择">
              <el-option
                v-for="item in platformList"
                :key="item.value"
                :label="item.dictName"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="延期历史">

            <el-select v-model="form.delayId" placeholder="请选择">
              <el-option
                v-for="item in delayList"
                :key="item.value"
                :label="item.dictName"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>

        </div>
        <el-form-item>
          <div class="block">
            <span class="demonstration" style="color:#606266;font-weight:500">截止日期</span>
            <el-date-picker
              v-model="form.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveProduct">立即保存</el-button>
          <el-button @click="back">上一步</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {listParams, listProvinces} from "@/api/dict";
  import {listCity} from "@/api/dict";
  import {listDicts} from "@/api/dict";
  import {selectAllCategories} from "@/api/category";
  import {insertProduct} from "@/api/product";
  import {selectAllTypes} from "@/api/type";
  import Global from "../../../../public/js/Golbal"

  export default {
    data() {
      return {
        upload: Global.baseUrl,
        img: '',
        flag: 1,  // 进行周边和漫展的切换  1为漫展 2为 周边
        typeList: [],
        form: {
          price: 0,
          productName: "",
          categoryId: 0,
          sellPrice: 0, // 预售票价格
          sitePrice: 0, // 现场票价格
          stock: 0,
          provinceId: 0,
          cityId: 0,
          img: "",
          address: "",
          date: "",
          grade: 0,
          venueId: '',
          trafficId: '',
          platformId: '',
          delayId: '',
          guestList: [],
          typeId: 0
        },
        guestName: '',
        categoryList: [],
        active: 1,
        provinceList: [],
        cityList: [],
        selectCityList: [], // 筛选
        params: {
          pageNum: 1,
          limit: 6,
          code: "",
        },
        delayList: [],
        platformList: [],
        trafficList: [],
        venueList: []
      };
    },
    methods: {
      getProductType() {
        selectAllTypes().then(res => {
          console.log(res)
          this.typeList = res.data
        })
      },
      saveParams() {
        var img = this.img;
        var guestName = this.guestName;
        if (!img || !guestName) {
          this.$message.error('保存参数失败')
          return
        }
        this.form.guestList.push({
          img: img,
          guestName: guestName
        })
        this.img = ''
        this.guestName = ''
        this.$message.success('保存参数成功')

      },
      getParams() {
        listParams().then(res => {
          this.venueList = res.data.venueList
          this.platformList = res.data.platformList
          this.trafficList = res.data.trafficList
          this.delayList = res.data.delayList
        })
      },

      toList() {
        this.$router.push('/product/list')
      },
      back() {
        this.active--
      },
      saveProduct() {
        insertProduct(this.form)
          .then((res) => {
            this.$message.success('添加成功')
            this.$router.push('/product/list')
          })
          .catch((reason) => {
          });
      },
      test3(val) {
        this.form.categoryId = val;
      },
      test4(val) {
        this.form.typeId = val
      },
      getCategoryList() {
        selectAllCategories().then((res) => {
          this.categoryList = res.data;
        });
      },
      save1() {
        if (this.active++ > 3) this.active = 0;
      },
      onSubmit() {
      },
      test2(cityId) {
        this.cityId = cityId;
      },
      test(val) {
        // 为了获取到province的id  提交数据
        let provinceList = this.provinceList;
        for (let i = 0; i < provinceList.length; i++) {
          if (provinceList[i].code == val) {
            this.form.provinceId = provinceList[i].code;
          }
        }
        this.ProvinceCode = val;
        let cityList = this.cityList;
        if (this.selectCityList.length != 0) {
          this.selectCityList = [];
        }
        for (let i = 0; i < cityList.length; i++) {
          if (cityList[i].provinceCode == this.ProvinceCode) {
            this.selectCityList.push(cityList[i]);
          }
        }
      },
      getCityList() {
        listCity()
          .then((res) => {
            this.cityList = res.data;
          })
          .catch((reason) => {
          });
      },
      getProvinceList() {
        listProvinces().then((res) => {
          this.provinceList = res.data;
        });
      },
      handleAvatarSuccess(res, file) {
        this.form.img = res.data;
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleAvatarSuccess02(res, file) {
        this.img = res.data;

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
    },
    created() {
      this.getProvinceList();
      this.getCityList();
      this.getCategoryList();
      this.getParams();
      this.getProductType()
    },
  };
</script>

<style>
  .buzhou {
    padding: 50px 420px;
    border: 2px solid #dee1e6;
    /* width: 60%; */
    /* margin: 0 auto; */
  }
</style>
